<script setup lang="ts">
import {useRouter, useRoute} from 'vue-router'
import {
    Menu as IconMenu,
    Location,
    Setting,
} from '@element-plus/icons-vue'
import {Server} from '@/stores/ajax';
import {reactive, ref, h} from 'vue'
import {Lock, Avatar} from '@element-plus/icons-vue'
import '@vueup/vue-quill/dist/vue-quill.snow.css';
import type {FormInstance, FormRules} from 'element-plus'
import adminArticleComponent from '@/components/adminArticleComponent.vue'
import moderateView from '@/views/ModerateView.vue'
import codemirrortest from '@/components/admin/codemirrortest.vue'
import {GetUserState} from '@/stores/userState';
let user = GetUserState()

let menuIndex = $ref("3")
const onMenuSelect = (key: string, keyPath: string[]) => {
    menuIndex = key
}
let loginData = $ref({
    username: "",
    password: ""
})
let rememberPassword = $ref(true)

const formSize = $ref('default')
const ruleFormRef = $ref<FormInstance>()
const registerData = reactive({
    username: "",
    password: "",
})

const rules = reactive<FormRules>({
    username: [
        {required: true, message: '请输入用户名', trigger: 'blur'},
        {min: 2, max: 15, message: '长度在2到15', trigger: 'blur'},
    ],
    password: [
        {required: true, message: '请输入密码', trigger: 'blur'},
        {min: 6, max: 32, message: '长度在6到32', trigger: 'blur'},
    ],
})
Server.get('/user/has_login').then((res) => {
    let data = res.data
    if (data && data.code == 0) {
        let res = data.return
        user.user_name = res.user_name
        user.uid = res.uid
        user.name = res.name
        user.tel = res.tel
        user.is_admin = res.is_admin
        user.is_guide = res.is_guide
        if (res.avatar)
            user.avatar = res.avatar
        user.gender = res.gender
        console.log(res)
    }
}).catch(err => {
    console.log(err)
})


const submitLogin = async () => {
    await Server.post('/user/login', loginData, true).then((res) => {
        let data = res.data
        if (data && data.code == 0) {
            let res = data.return
            user.user_name = res.user_name
            user.uid = res.uid
            user.name = res.name
            user.tel = res.tel
            user.is_admin = res.is_admin
            user.is_guide = res.is_guide
            user.avatar = res.avatar
            loginVisiable = false
        }
    }).catch(err => {
        console.log(err)
    })
}

const logout = () => {
    user.uid = 0
    Server.get('/user/logout', {}, true)
}

let loginVisiable = $ref(false)
let registerVisiable = $ref(false)

</script>

<template>
    <el-container v-if="user.is_admin">
        <el-aside width="200px">
            <el-menu default-active="1" class="el-menu-vertical-demo" @select="onMenuSelect">
                <el-menu-item index="1">
                    <el-icon>
                        <location />
                    </el-icon>
                    <span>动态管理</span>
                </el-menu-item>
                <el-menu-item index="2">
                    <el-icon>
                        <location />
                    </el-icon>
                    <span>编辑</span>
                </el-menu-item>
<el-menu-item index="3">
                    <el-icon>
                        <location />
                    </el-icon>
                    <span>审核</span>
                </el-menu-item>
            </el-menu>

        </el-aside>
        <el-container>
            <!-- <el-header height="20px">Header</el-header> -->
            <el-main style="overflow: visible;">
                <adminArticleComponent v-if="menuIndex == '1'" />
                <codemirrortest v-if="menuIndex == '2'" />
                <moderateView v-if="menuIndex == '3'"/>
            </el-main>
        </el-container>
    </el-container>
    <div v-else>
        <el-affix style="" :offset="120">
            <el-card style="width:300px; margin: 0 auto;">
                <div class="login__wrap fv">
                    <div class="fontsize1 bold1">管理登录</div>
                    <div class="login__input fv" style="justify-content: space-between; height: 70px;">
                        <el-input v-model="loginData.username" placeholder="请输入账号" :prefix-icon="Avatar" />
                        <el-input v-model="loginData.password" type="password" class="w-50 m-2" placeholder="请输入密码"
                            :prefix-icon="Lock" @keyup.enter="submitLogin" />
                    </div>
                    <div style="align-self: flex-start;">
                        <el-checkbox v-model="rememberPassword">记住密码</el-checkbox>
                    </div>
                    <el-button type="primary" style="width: 100%;" @click="submitLogin">登录</el-button>
                </div>
            </el-card>
        </el-affix>
    </div>

    <br />
</template>

<style scoped>
.login__wrap {
    /* height: 190px; */
    justify-content: space-between;
}

.login__wrap>div {
    text-align: center;
    margin: 0px 0 10px;
}
</style>
